<!DOCTYPE html>
<html>
    <head>
  
     <title>连修明的博客</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
     <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

     <style type="text/css">
     	.main {
     		height: 100%;
     	}
     	.formchild {
     		position: absolute;
     		top:40%;
     		transform: translateY(-50%);
     	}
     </style>
    </head>

    <body>
    
		<div class="container main" style="width: 500px ">
			<form method="POST" action="/admin" class="formchild">
				<div class="form-group">
					<label>Account</label>
					<input class="form-control" id = "username" style="width: 500px" placeholder="Enter account" name="username">
				</div>
				
				<div class="form-group">
					<label>Password</label>
					<input  class="form-control" id="pwd" type="Password"  placeholder="Password" name="userpassword">
				</div>

				<div class="checkbox">
					<label>
						<input type="checkbox" name="autologin"> 自动登陆
					</label>
				</div>
					<button type="submit" class="btn btn-default" onclick="return checkInput()">登陆</button>
					<button type="submit" class="btn btn-default" onclick="return returnHome()">返回</button>
				
			</form>
			
		</div>
    </body>
    
    <script type="text/javascript">

    	function checkInput() {
    		var user = document.getElementById("username");
    		if (user.value.length == 0) {
    			alert("用户名不能为空！");
    			return false;
    		}

    		var pwd = document.getElementById("pwd");
    		if (pwd.value.length == 0) {
    			alert("密码不能为空!");
    			return false;
    		}
    		return true;
    	}

    	function returnHome() {
    		window.location.href = "/";
    		return false;
    	}
    </script>

</html>
